<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeDetail">下级会员</el-breadcrumb-item>
          <!--<transition name="breadcrumb">-->
            <!--<el-breadcrumb-item :key="currentTypeInfo.title">{{currentTypeInfo.title}}</el-breadcrumb-item>-->
          <!--</transition>-->
          <transition-group name="breadcrumb">
            <template v-if="betDetail != ''">
              <el-breadcrumb-item :key="2" @click.native="close">{{currentTypeInfo.title}}</el-breadcrumb-item>
              <el-breadcrumb-item :key="3">投注详情({{betDetail.game}})</el-breadcrumb-item>
            </template>
            <template v-else>
              <el-breadcrumb-item :key="2">{{currentTypeInfo.title}}</el-breadcrumb-item>
            </template>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        <template v-if="filters.date">时间：{{filters.date[0] | toDate}} - {{filters.date[1] | toDate}}</template> <br />
        会员账户：{{info.username}}
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="close"> 返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <custom-container>
        <custom-container-header no-spacing v-show="betDetail === ''">
          <el-form :model="filters" ref="form" :disabled="loading"
                   inline size="medium"
                   @submit.native.prevent="gridSearch"
                   class="width-100"
          >
            <el-form-item label="查询时间:">
              <el-date-picker
                v-model="filters.date"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="{disabledDate: beforeToday.disabledDate}"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item class="float-right">
              <custom-button-group v-model="type">
                <custom-button v-for="item in nav" :key="item.value" :label="item.value">
                  {{item.title}}
                </custom-button>
              </custom-button-group>
            </el-form-item>

          </el-form>
        </custom-container-header>
        <custom-container-body>
          <component
            :is="betDetail != '' ? 'sub-member-game-bet-detail' : currentTypeInfo.value"
            ref="table"
            :date="filters.date"
            :username="info.username"
            :betInfo="betDetail"
            v-model="loading"
            @showBetDetail="showBetDetail"
          ></component>
        </custom-container-body>
      </custom-container>
    </static-container-body>
  </static-container>
</template>

<script>

  import SubMemberGameWinLose from './sub-member-game-win-lose';
  import SubMemberRechargeDetail from './sub-member-recharge-detail';
  import SubMemberWithdrawDetail from './sub-member-withdraw-detail';
  import SubMemberDividend from './sub-member-dividend';
  import SubMemberGameBetDetail from './sub-member-game-bet-detail';

  import {pickerOption} from '@/build';

  export default {
    name: "sub-member-detail",

    components: {
      SubMemberGameWinLose,
      SubMemberRechargeDetail,
      SubMemberWithdrawDetail,
      SubMemberDividend,
      'sub-member-game-bet-detail':SubMemberGameBetDetail,
    },

    mixins: [pickerOption],

    props: ['info'],

    inject: ['closeDetail'],

    data() {
      return {
        loading: false,
        nav: [
          {
            title: '游戏输赢明细',
            value: SubMemberGameWinLose.name
          },
          {
            title: '存款明细',
            value: SubMemberRechargeDetail.name
          },
          {
            title: '提款明细',
            value: SubMemberWithdrawDetail.name
          },
          {
            title: '红利返水明细',
            value: SubMemberDividend.name
          },
        ],
        type: SubMemberGameWinLose.name,

        filters: {
          date: this.info.currentDate,
          username: this.info.username
        },
        currentDate: this.info.currentDate,
        betDetail:'',
      };
    },

    watch: {
      'filters.date': {
        handler() {
          this.$nextTick(() => {
            this.$refs.table.getAll();
          });
        }
      },
    },

    computed: {
      currentTypeInfo() {
        return _.find(this.nav, {value: this.type});
      }
    },

	  methods:{
	    showBetDetail(val){
	    	this.betDetail = val;
      },
		  close(){
			  if (this.betDetail != '') {
				  this.betDetail = '';
			  } else {
				  this.closeDetail();
			  }
      }
    }
  }
</script>

<style scoped>

</style>